<template>
	<view class="home-page">
		<!-- 顶部区域 -->
		<search2 :keyword="keyword" bgColor="rgba(187,187,187,0.3)"></search2>
		<!-- 标签栏 -->
		<view class="tab-box">
			<view class="title-style">盲盒系列</view>
			<up-tabs :list="list" @click="click" :lineWidth="lineWidth" lineColor="#fff" :activeStyle="{
            color: '#fff',fontWeight: 'bold'}" @change="changeTab" :inactiveStyle="{color: '#606266'}"
				itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"></up-tabs>
		</view>

		<!-- 可横向滑动的分类图标栏 -->
		<view v-if="tabsIndex==0">
			<scroll-view scroll-x class="category-scroll" :scroll-with-animation="true">
				<view class="category-wrap">
					<view v-for="(item, index) in categoryList" :key="index" class="category-item">
						<image :src="item.icon" mode="aspectFit" class="category-icon" />
						<text class="category-text">{{ item.text }}</text>
					</view>
				</view>
			</scroll-view>
		</view>
		<view v-if="tabsIndex==1" style="height: 296rpx;">
			1
		</view>
		<view v-if="tabsIndex==2" style="height: 296rpx;">
			2
		</view>
		<view v-if="tabsIndex==3" style="height: 296rpx;">
			3
		</view>

		<!-- 卡片列表 -->
		<scroll-view scroll-y class="card-scroll" :scroll-with-animation="true">
			<view class="card-list">
				<view v-for="(card, index) in cardList" :key="index" class="card-item"
					@click="showDetail = true; currentCard = card">
					<image :src="card.image" class="card-image"></image>
					<text class="card-title">{{ card.title }}</text>
				</view>
			</view>
		</scroll-view>

		<!-- 弹窗详情 -->
		<view class="detail-popup" v-if="showDetail">
			<view class="popup-content">
				<view>
					<image :src="currentCard.image" class="popup-image"></image>
					<view class="popup-title">{{ currentCard.title }}</view>
					<view class="popup-desc">盲盒系列：{{ currentCard.series }}</view>
					<view class="popup-desc">售价：{{ currentCard.price }}</view>
					<view class="popup-desc">款式：{{ currentCard.style }}</view>
					<button class="popup-btn" @click="goDetailPage">商品详情页</button>
					<view class="close-btn" @click="showDetail = false">×</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, reactive } from 'vue';
	import search2 from '@/pages/home/components/search2.vue'
	interface Category {
		icon : string;
		text : string;
	}

	interface Card {
		image : string;
		title : string;
		series : string;
		price : string;
		style : string;
	}

	// 响应式数据
	const categoryList = ref<Category[]>([
		{ icon: '/static/img/fox.jpg', text: '动物园' },
		{ icon: '/static/img/fox.jpg', text: '万圣400' },
		{ icon: '/static/img/fox.jpg', text: '马卡龙二代' },
		{ icon: '/static/img/fox.jpg', text: '小兔归来' },
		{ icon: '/static/img/fox.jpg', text: '萌龙比' },
		{ icon: '/static/img/fox.jpg', text: '马卡龙小兔' },
		{ icon: '/static/img/fox.jpg', text: '果园挞蓝色' },
		{ icon: '/static/img/fox.jpg', text: '手机包' },
		{ icon: '/static/img/fox.jpg', text: '其他分类1' },
		{ icon: '/static/img/fox.jpg', text: '其他分类2' },
	]);
	const keyword = ref('')
	const cardList = ref<Card[]>([
		{
			image: '/static/img/fox.jpg',
			title: '狐狸',
			series: '动物园一代',
			price: '￥69/盒',
			style: '普通款',
		},
		{
			image: '/static/img/dog.jpg',
			title: '小狗',
			series: '牧场系列',
			price: '￥69/盒',
			style: '普通款',
		},
		{
			image: '/static/img/dog.jpg',
			title: '小猪',
			series: '农场系列',
			price: '￥69/盒',
			style: '普通款',
		},
		{
			image: '/static/img/dog.jpg',
			title: '大象',
			series: '森林系列',
			price: '￥69/盒',
			style: '普通款',
		}, {
			image: '/static/img/dog.jpg',
			title: '大象',
			series: '森林系列',
			price: '￥69/盒',
			style: '普通款',
		}, {
			image: '/static/img/dog.jpg',
			title: '大象',
			series: '森林系列',
			price: '￥69/盒',
			style: '普通款',
		},{
			image: '/static/img/fox.jpg',
			title: '狐狸',
			series: '动物园一代',
			price: '￥69/盒',
			style: '普通款',
		},{
			image: '/static/img/fox.jpg',
			title: '狐狸',
			series: '动物园一代',
			price: '￥69/盒',
			style: '普通款',
		},{
			image: '/static/img/fox.jpg',
			title: '狐狸',
			series: '动物园一代',
			price: '￥69/盒',
			style: '普通款',
		},{
			image: '/static/img/fox.jpg',
			title: '狐狸',
			series: '动物园一代',
			price: '￥69/盒',
			style: '普通款',
		},
	]);

	const showDetail = ref<boolean>(false);
	const currentCard = ref<Card>(cardList.value[0]);
	// 创建响应式数据  
	const list = ref([
		{ name: 'BabyThree娃三岁' },
		{ name: 'Lilla莉菈' },
		{ name: 'MIGO' },
		{ name: '萌粒' },
	]);
	const lineWidth = ref(140)
	const tabsIndex = ref<number>(0)
	function changeTab(item : any) {
		tabsIndex.value = item.index
		const widths = [140, 70, 50, 40];
		lineWidth.value = widths[item.index] || 60
	}
	// 定义方法  
	function click(item) {
		console.log('item', item);
	}
	// 方法
	const goDetailPage = () => {
		uni.navigateTo({
			url: '/pages/goodsDetail/goodsDetail?id=123',
		});
	};
</script>

<style lang="scss" scoped>
	.home-page {
		background-image: url('/static/img/bg2.png');
		width: 100%;
		height: 100vh;
		background-size: cover;
		background-repeat: no-repeat;
		padding-top: 2rem;
	}

	// 标签栏样式保持不变
	.tab-box {
		margin-top: 1rem;
		height: 120rpx;
		line-height: 120rpx;

		.title-style {
			margin-left: 1rem;
			color: #fff;
			font-weight: 600;
			height: 50rpx;
			line-height: 50rpx;
		}
	}

	// 可横向滑动的分类图标栏
	.category-scroll {
		white-space: nowrap;
		width: 100%;

		.category-wrap {
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start;
			/* 设置宽度以确保两行 */
			width: 1092rpx;
			/* 假设每个item宽182rpx，共有6个，则总宽度为1092rpx */
			height: 296rpx;

			.category-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				width: 150rpx;
				box-sizing: border-box;
				padding: 10rpx 0;
				margin: 0 16rpx;
				transition: background-color 0.3s;

				.category-item.active {
					background-color: #f0f0f0;
					font-weight: bold;
				}

				.category-icon {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					margin-bottom: 8rpx;
				}

				.category-text {
					height: 40rpx;
					line-height: 40rpx;
					font-size: 24rpx;
					color: #fff;
				}
			}
		}
	}

	.card-scroll {
		white-space: nowrap;
		width: 100%;
		height: calc(100vh - 600rpx);
		box-sizing: border-box;
		padding: 10rpx 10rpx;

		// 卡片列表样式保持不变
		.card-list {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;

			.card-item {
				width: calc(50% - 30rpx);
				background-color: #fff;
				border-radius: 24rpx;
				padding: 16rpx;
				box-sizing: border-box;
				margin-bottom: 24rpx;
				display: flex;
				flex-direction: column;
				align-items: center;

				.card-image {
					width: 270rpx;
					height: 260rpx;
					border-radius: 12rpx;
					margin-bottom: 8rpx;
				}

				.card-title {
					font-size: 24rpx;
					color: #333;
				}
			}
		}
	}

	// 弹窗详情样式保持不变
	.detail-popup {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, .3);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 999;

		.popup-content {
			width: 600rpx;
			height: 700rpx;
			background-image: url('/static/img/tc.png');
			background-size: cover;
			background-repeat: no-repeat;
			border-radius: 24rpx;
			box-sizing: border-box;
			padding: 20rpx;
			position: relative;
			display: flex;
			justify-content: center;

			.popup-image {
				width: 240rpx;
				height: 220rpx;
				border-radius: 12rpx;
				margin: 40rpx 0 16rpx;
			}

			.popup-title {
				font-size: 24rpx;
				color: #fff;
				font-weight: bold;
				margin-bottom: 8rpx;
				text-align: center;
			}

			.popup-desc {
				font-size: 24rpx;
				color: #fff;
				font-weight: bold;
				margin-bottom: 8rpx;
			}

			.popup-btn {
				background-color: #fca3b4;
				color: #fff;
				font-size: 24rpx;
				padding: 12rpx 32rpx;
				border-radius: 12rpx;
				position: absolute;
				bottom: 100rpx;
				left: 50%;
				transform: translate(-50%);
			}

			.close-btn {
				width: 45rpx;
				height: 45rpx;
				line-height: 45rpx;
				text-align: center;
				border-radius: 50%;
				color: #dcdcdc;
				background-color: #fca3b4;
				position: absolute;
				bottom: 30rpx;
				left: 50%;
				transform: translate(-50%);
				font-size: 40rpx;
			}
		}
	}
</style>